<template>
    <div class="input-tags">
        <div class="input-con" v-if="isShowInput">
            <el-input 
                class="tag-input"
                v-model="innerValue" 
                @keydown.enter.native.stop="addHandler"
                placeholder="输入自定义标签，回车添加"
                :disabled="inputDisable"
            ></el-input>

            <span class="text-remain">
                可添加（{{remain}}）
            </span>
        </div>

        <div class="tag-list">
            <item-tag 
            class="tag-item"
            v-for="(item, i) in model" 
            :key="i"
            closeable
            @close="closeHandler(item)"
            active
            >
                {{item}}
            </item-tag>
        </div>
    </div>
</template>

<script>
import itemTag from './item-tag';

export default {
    components: {
        itemTag,
    },
    props: {
        value: {
            type: Array,
            default: () => [],
        },
        isShowInput:{
            type: Boolean,
            default: true,
        },
    },
    data: () => ({
        innerValue: '',
    }),
    computed: {
        model: {
            get() {
                return this.value;
            },
            set(val) {
                this.$emit('input', val);
            },
        },
        inputDisable() {
            return this.model.length >= 10;
        },
        remain() {
            return 10 - this.model.length;
        },
    },
    methods: {
        addHandler() {
            if (!this.innerValue) return;

            this.model.push(this.innerValue);
            this.innerValue = '';
        },
        closeHandler(val) {
            showConfirm('删除这条自定义标签？', 'warning', () => {
                var index = this.model.indexOf(val);

                this.model.splice(index, 1);
            });
        }
    },
}
</script>

<style lang="scss" scoped>
    @import '@css/var.scss';

    .input-tags{
        overflow: hidden;

        .input-con{
            padding-top: 30px;
            border-top: 1px solid #f0f0f0;

            .tag-input{
                width: 264px;
                font-size: 12px;
            }

            .text-remain{
                font-size: 12px;
                color: #999;
                margin-left: 1em;
            }
        }

        .tag-list{
            overflow: hidden;
            margin-right: -20px;
            margin-top: 25px;

            .tag-item{
                float: left;
                margin-right: 20px;
                margin-bottom: 20px;
            }
        }
    }
</style>